<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <link media="all" type="t3ext/css" href="css/seat_style.css" rel="stylesheet">
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <style type="text/css">
	.selected {
		background:orange;
	}
	</style>
	<script>
		var dataString = "";
		var totalPrice = 0;
		var price = eval(${thisMovie.movieSlot.price});
		
		$(document).ready(function(){
                        $('#purchaseType').val(0);
                        
			$('#loyaltyPts').val(0);
                        
			$('.boughtSeat').each(function() {
                          $(this).html('<img src="images/sold_seat2.gif" width="16" height="20">');
                       });
			
			$('#loyaltyInputBar').hide();
			
			$("select").change(function(){
				if($(this).val() == 0){
					$('#loyaltyInputBar').hide();
                                        $('#sum').val(totalPrice);
				} else {
					$('#loyaltyInputBar').show();
                                        $('#sum').val(totalPrice - $('#loyaltyPts').val());
				}
			});
			
			$("input").keyup(function(){
				if(!$.isNumeric($(this).val())){
					alert('Error Message: Please enter a number. (Loyalty Points)');
					$(this).val("0");
				}
				
				tempPrice = totalPrice;
				tempPrice -= $(this).val();
				if(tempPrice < 0){
					alert('Error Message: Total price cannot be smaller than 0');
					$(this).val("0");
					$('#sum').val(totalPrice);
                                        $('#price').val(totalPrice);
				} else {
					$('#sum').val(tempPrice);
                                        $('#price').val(tempPrice);
                                        $('#loyaltyPts').val($(this).val());
				}
				
				
			});
                        
                        $("input[type='submit']").click(function(){
                            $('#price').val($('#sum').val());
                            
                        });
			
			
			$('td.availableSeat').click(function(){
				
				if($(this).hasClass("selected")){
					$(this).removeClass("selected");
					totalPrice -= price;

				} else {
					$(this).addClass("selected");
					totalPrice += price;
				}
				
				dataString = "";
				
				$(".selected").each(function(){
					dataString += $(this).attr('id') + ",";
				});
				$('#sum').val(totalPrice);
				$('#seatNo').val(dataString);
			});
			
		});
	</script>
  </head>
  <body>
	<div id="errorMessage">${topDisplayMsg}</div>
	<div id="info" align="center">
		<table>
			<tr>
				<td class="infoTitle">Movie</td>
				<td class="infoDetail">${thisMovie.name}</td>
			</tr>
			<tr>
				<td class="infoTitle">House</td>
				<td class="infoDetail">${thisMovie.movieSlot.house}</td>
			</tr>
			<tr>
				<td class="infoTitle">Show Time</td>
				<td class="infoDetail">${thisMovie.movieSlot.startTime}</td>
			</tr>
			<tr>
				<td class="infoTitle">Price</td>
				<td class="infoDetail">${thisMovie.movieSlot.price}</td>
			</tr>
		</table>
	</div>
	<div id="seatTableContainer" align="center">
		<div id="indicator">
		  <p> 
			<img src="images/s_available.gif" width="21" height="24"><span class="desc">AVAILABLE</span>
			<img src="images/sold_seat.gif" width="21" height="24"><span class="desc">SOLD</span>
			<img src="images/w_available_seat.gif" width="21" height="24"><span class="desc">DISABLED SEAT</span>
			<br><img src="images/process_seat.gif" width="21" height="24"><span class="desc">PROCESSING</span>
		  </p>
		</div>
        <% if(request.getParameter("house").equals("1")){ %>
        <%@ include file="house1.jsp"%>
        <% } else if(request.getParameter("house").equals("2")){ %>
        <%@ include file="house2.jsp"%>
        <% } else if(request.getParameter("house").equals("3")){ %>
        <%@ include file="house3.jsp"%>
        <% } else if(request.getParameter("house").equals("4")){ %>
        <%@ include file="house4.jsp"%>
        <% } %>
	  <form name="" method="get" action="Purchase.do">
              <input name="movie" id="slotID" type="hidden" value="${param.movie}">
      <input name="slotID" id="slotID" type="hidden" value="${param.slotID}">
      <input name="seatNo" id="seatNo" type="hidden" value="">
      <input name="price" id="price" type="hidden" value="${thisMovie.movieSlot.price}">
      <input name="action" id="action" type="hidden" value="pay">
      <input name="loyaltyPts" id="loyaltyPts" type="hidden" value="">

      <p><label>Total: </label><input name="sum" type="text" id="sum" value="0" size="1" readonly>
      <label>Purchase Type: </label><select name="purchaseType" id="purchaseType">
        <option value="0" selected="selected">Cash</option>
        <option value="1" style="display:${isRegistered}">Loyalty Pts</option>
      </select>
      
      <span id="loyaltyInputBar"><label>Loyalty Pts: </label><input name="loyaltyPts" type="text" value="0" id="loyaltyPts" size="1"></span>
	  <input type="submit" value="Purchase"></p>
	  </form>
      
    </div>
  </body>
</html>

